<template>
  <container title="优惠券列表">
    <template v-slot:tips>
      <el-tabs v-model="tabBarName" @tab-click="tabBarClick" class="title-tab">
        <el-tab-pane v-for="(item, index) in tabBarList" :label="item.label" :name="item.name" :key="index">
        </el-tab-pane>
      </el-tabs>
    </template>
    <div class="main-card"
         v-loading="loading">
      <tbc-pagination :total="total" simple :config="{page, size}" @change="loadDataList">
        <template #left>
          <el-input placeholder="优惠券名称" class="short" v-model="filter.keyword" clearable size="small"
                    style="margin-right:10px;width:200px;" prefix-icon="el-icon-search">
          </el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
        </template>
        <template #right>
          <el-button size="small" icon="el-icon-plus" circle
                     @click="onButtonClick(null, 'add')"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container">
        <tbc-dynamic-table
            v-loading="loading"
            :data="dataList"
            :cols="[
              {type: 'selection', width: 60},
              {label: '基本信息', prop: 'coupon_name', width: 220},
              {label: '优惠', prop: 'discount', width: 120},
              {label: '领取信息', prop: 'distribution', width: 200},
              {label: '有效期', prop: 'time', width: 220},
              {label: '总数/发放', prop: 'coupon_total', width: 200},
              {label: '状态', prop: 'status', width: 160},
              {label: '操作', width: 160, type: 'action', fixed: 'right',
              click: onButtonClick, button: [
                  {label: '编辑', type: 'text', code: 'edit'},
                  {label: '领取列表', type: 'text', code: 'received'},
          ], more: [
                {label: '删除', type: 'text', code: 'delete'},
                {label: '发放', type: 'text', code: 'send'},
          ]}]">
          <template #coupon_name="scope">
            <p>{{ scope.row.coupon_id }}</p>
            <p>{{ scope.row.coupon_name }}</p>
          </template>
          <template #discount="scope">
            <p>满：{{ scope.row.minimum }}</p>
            <p>减：{{ scope.row.discount }}</p>
          </template>

          <template #distribution="scope">
            <p>限额：{{ scope.row.quota }}</p>
            <p>方式：{{ scope.row.distribution_method_name }}</p>
          </template>

          <template #coupon_total="scope">
            <p>总数：{{ scope.row.coupon_total }}</p>
            <p>发放：{{ scope.row.distribution_total }}</p>
          </template>

          <template #time="scope">
            <template v-if="scope.row.effective_type == 1">
              <p>开始：{{ scope.row.effective_start_time }}</p>
              <p>结束：{{ scope.row.effective_end_time }}</p>
            </template>
            <template v-if="scope.row.effective_type == 2">
              <p>领取后，{{ scope.row.effective_days }}天内有效</p>
            </template>
          </template>

          <template #status="scope">
            <p>
              <el-tag
                  effect="dark"
                  size="mini"
                  v-if="scope.row.status === 1"
                  type="success"
              >正常
              </el-tag
              >
              <el-tag
                  effect="dark"
                  size="mini"
                  v-if="scope.row.status === 2"
                  type="danger"
              >已禁用
              </el-tag
              >
            </p>
            <p>{{ scope.row.create_time }}</p>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination ref="pagination" :total="total" :config="{page, size}" @change="loadDataList"/>
    </div>
  </container>
  <coupon-send ref="sendComponent"/>
  <coupon-received ref="receivedComponent"/>
</template>
<script lang="ts">
import {
  defineComponent, onMounted, ref,
  defineAsyncComponent, Ref
} from 'vue'
import useCoupon from './api/coupon'
import {useRouter} from 'vue-router'


export default defineComponent({

  name: 'coupon-list',

  components: {
    CouponSend: defineAsyncComponent(
        () => import('./CouponSend.vue')),
    CouponReceived: defineAsyncComponent(
        () => import('./CouponReceived.vue'))
  },

  setup() {
    const coupon = useCoupon()
    const router = useRouter()
    const tabBarName = ref('all')
    const sendComponent: Ref = ref(null)
    const receivedComponent: Ref = ref(null)
    const tabBarList = [
      {label: '全部', name: 'all', status: 0},
      {label: '正常', name: 'on', status: 1},
      {label: '禁用', name: 'off', status: 2}
    ]

    // 点击按钮
    const onButtonClick = (data: { coupon_id: string }, action: string) => {
      if (action === 'add') return router.push({name: 'coupon-add'})
      if (action === 'edit') {
        router.push({name: 'coupon-edit', query: {id: data.coupon_id}})
      }
      if (action === 'received') {
        receivedComponent.value.show(data)
      }
      if (action === 'send') {
        sendComponent.value.show(data)
      }
    }

    const tabBarClick = (tab: Record<string, number>) => {
      coupon.filter.value.status = tabBarList[tab.index].status
      coupon.loadDataList(1)
    }

    onMounted(() => {
      coupon.loadDataList(1)
    })

    return {
      ...coupon,
      tabBarName,
      tabBarList,
      tabBarClick,
      onButtonClick,
      sendComponent,
      receivedComponent
    }
  }
})
</script>
